<template>
       <div>
         <el-card>
           <div style="display: flex">
               <div style="width: 300px">
                 <el-image :src="goods.img" :preview-src-list="[goods.img]"></el-image>
               </div>
             <div style="flex: 1;padding-left:50px ; ">
            <div class="item1"style="font-size: 15px"><h3>{{goods.name}}</h3></div>
               <div class="item1" style="font-size: 14px">{{goods.description}}</div>
               <div class="item1" style="color: orangered">$:{{goods.price}}元</div>
               <div class="item1" style="font-size: 14px">库存：{{goods.store}}<span style="font-size: 14px">{{goods.unit}}</span></div>
               <div class="item1">
                 <el-input-number v-model="form.num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
                 <span style="margin-left: 10px">{{goods.unit}}</span>
                </div>
               <div class="item1" style="margin-top: 50px">
                 <el-button size="medium" style="background-color: red; color: white"><i class="el-icon-wallet"></i>直接购买</el-button>
                 <el-button size="medium" style="background-color: red; color: white" v-on:click="addCart"><i class="el-icon-shopping-cart-2"></i>加入购物车</el-button>
               </div>
             </div>
           </div>
         </el-card>
       </div>
</template>

<script>
export default {
  name: "Detail",
  data(){
    return{
       id: this.$route.query.id,
      goods:[],
      form:{num:1},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.load();
  },
  methods:{
    load() {
      this.request.get("/goods/"+this.id).then(res => {
        this.goods= res.data
      })
    },
    addCart(){
      if (!this.user.username){
        this.$message.warning("请登录后在操作")
        return
      }
      this.form.goodsId= this.goods.id //商品id
      this.request.post("/cart",this.form).then(res =>{
        if (res.code==='200'){
          this.$message.success("添加购物车成功")
        }else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.item1{
    padding: 5px;
}

</style>